<template>
    <div class="index-page">
        <!-- 头部 -->
        <searchHeader></searchHeader>
        <!-- 搜索栏 -->
        <div class="search-bar">
            <input type="text" v-model="searchKeyword" @input="handleSearch" placeholder="请输入搜索关键词">
        </div>
        <!-- 搜索结果展示区域 -->
        <div v-if="searchResults.length > 0" class="search-results">
            <ShopItem v-for="product in searchResults" :key="product.id" :product="product" />
        </div>
        <!-- 其他内容 -->
        <!-- 轮播图 -->
        <van-swipe v-if="swiperData" class="my-swipe" :autoplay="3000" indicator-color="yellow">
            <van-swipe-item v-for="(item, index) in swiperData.source.adsense" :key="index">
                <img class="swipe-img" :src="item.img" alt="">
            </van-swipe-item>
        </van-swipe>
        <!-- 商品类别-->
        <shopClassifyTitleVue zhText="本季推荐" enText="Seasonal Recommend" :isMore="true"></shopClassifyTitleVue>
        <!-- 蛋糕图片-->
        <div class="cake-img">
            <img src="https://mcake-oss.oss-cn-hangzhou.aliyuncs.com/file/492505133bdcb034/0f8710b0026becc3.jpg" alt="">
            <img src="https://mcake-oss.oss-cn-hangzhou.aliyuncs.com/file/492505133bdcb034/0f8710b0026becc3.jpg" alt="">
            <img src="https://mcake-oss.oss-cn-hangzhou.aliyuncs.com/file/492505133bdcb034/0f8710b0026becc3.jpg" alt="">
        </div>
        <shopClassifyTitleVue zhText="法式经典" enText="French Classics" :isMore="true"></shopClassifyTitleVue>
        <img class="cake-img-big" src="https://mcake-oss.oss-cn-hangzhou.aliyuncs.com/file/abd8fe9087c3ea1a/4d496694b1f9ca15.jpg">
        <!-- 商品列表-->
        <div class="shop-box">
            <ShopItem v-for="i in 8" :key="i"></ShopItem>
        </div>
        <!-- 底部导航 -->
        <tabBar :active="active"></tabBar>
    </div>
</template>
<style lang="less" scoped>
.search-bar {
    margin: 20px;
    input {
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
}

.search-results {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
}

.shop-box {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
}

.cake-img-big {
    width: 100%;
    height: 190px;
}

.swipe-img {
    width: 100%;
    height: 395px;
}

.cake-img {
    overflow-x: scroll;
    height: 145px;
    white-space: nowrap;
    & img:first-child {
        width: 216px;
        height: 100%;
    }
    img {
        width: 113px;
        height: 100%;
    }
}
</style>
<script>
import ShopItem from '@/components/shopItem.vue';

export default {
    created() {
        this.$axios.get("http://localhost:8888/index").then(res => {
            console.log(res, '请求成功');
            this.allData = res.data;
            res.data.list.forEach(item => {
                if (item.title == '首页轮播') {
                    this.swiperData = item;
                    console.log(this.swiperData, '轮播图数据'); // 检查数据是否正确赋值
                }
            });
        }).catch(err => {
            console.log(err, '请求失败');
        });
    },
    components: {
        searchHeader: () => import("../components/searchHeader.vue"),
        tabBar: () => import("../components/tabBar.vue"),
        shopClassifyTitleVue: () => import("../components/shopClassifyTitle.vue"),
        ShopItem
    },
    data() {
        return {
            allData: null,
            active: 0,
            swiperData: null,
            searchKeyword: '',
            searchResults: []
        };
    },
    methods: {
        handleSearch() {
            if (this.searchKeyword.trim() === '') {
                this.searchResults = [];
                return;
            }
            this.$axios.get(`http://localhost:8888/search?keyword=${this.searchKeyword}`).then(res => {
                console.log(res, '搜索成功');
                this.searchResults = res.data;
            }).catch(err => {
                console.log(err, '搜索失败');
            });
        }
    }
};
</script>